@extends('layout.app')

@section('title', 'Form Event')

{{--@section('sidebar')
    @parent
    <p>this text is append to sidebar</p>
@endsection--}}

@section('content')
<div class="container">
    <div class="card d-flex mt-3">
        <div class="card-header m-lg-0">
            <div class="card-title">Iteration</div>
        </div>
        @verbatim
        <div class="card-body" id="element-form">
            <article id="component">
                <form>
                    <div class="border-bottom border-info form-group">
                        <label for="input">Input</label>
                        <input id="input" class="form-text" v-model.number.trim="number" />
                        <p class="text-warning m-0">Your value is:</p>
                        <p class="text-success m-0">{{num}}</p>
                        <p class="text-success m-0">{{number}}</p>
                    </div>

                    <div class="border-bottom border-info form-group">
                        <label for="input">Input</label>
                        <input id="input" class="form-text" v-model="input" />
                        <p class="text-warning m-0">Your value is:</p>
                        <p class="text-success m-0">{{input}}</p>
                    </div>

                    <div class="border-bottom border-info form-group">
                        <label for="textarea">textarea</label>
                        <textarea id="textarea" class="form-control" v-model="textarea"></textarea>
                        <p class="text-warning m-0">Your value is:</p>
                        <p class="text-success m-0">{{textarea}}</p>
                    </div>

                    <div class="border-bottom border-info form-group">
                        <label for="checkbox">Is Me?</label>
                        <input id="checkbox" type="checkbox" v-model="checkbox" value="a" />
                        <p class="text-warning m-0">Your value is:</p>
                        <p class="text-success m-0">{{checkbox}}</p>
                    </div>

                    <div class="border-bottom border-info form-group">
                        <label for="checkbox1">Me?</label>
                        <input id="checkbox1" type="checkbox" value="Me" v-model="checkboxes" />
                        <label for="checkbox2">You?</label>
                        <input id="checkbox2" type="checkbox" value="You" v-model="checkboxes" />
                        <label for="checkbox3">He?</label>
                        <input id="checkbox3" type="checkbox" value="He" v-model="checkboxes" />
                        <p class="text-warning m-0">Your value is:</p>
                        <p class="text-success m-0">{{checkboxes}}</p>
                    </div>
                    <div class="border-bottom border-info form-group">
                        <label for="radio1">Me?</label>
                        <input id="radio1" type="radio" value="Me" v-model="radio" />
                        <label for="radio2">You?</label>
                        <input id="radio2" type="radio" value="You" v-model="radio" />
                        <label for="radio3">He?</label>
                        <input id="radio3" type="radio" value="He" v-model="radio" />
                        <p class="text-warning m-0">Your value is:</p>
                        <p class="text-success m-0">{{radio}}</p>
                    </div>
                    <div class="border-bottom border-info form-group">
                        <label for="select">Select?</label>
                        <select id="select" class="form-check form-control" v-model="selected">
                            <option value="">Please select one?</option>
                            <option is="select-option" v-for="option in select"
                                    :key="option.id"
                                    :val="option.id"
                                    :name="option.name"></option>
                        </select>
                        <p class="text-warning m-0">Your value is:</p>
                        <p class="text-success m-0">{{selected}}</p>
                    </div>
                    <div class="border-bottom border-info form-group">
                        <label for="multipleSelect">Multiple Select?</label>
                        <select id="multipleSelect" multiple="multiple"
                                class="form-check form-control"
                                v-model="multipleSelected">
                            <option is="select-option"
                                    v-for="option in multipleSelect"
                                    :key="option.id"
                                    :val="option.id"
                                    :name="option.name"></option>
                        </select>
                        <p class="text-warning m-0">Your value is:</p>
                        <p class="text-success m-0">{{multipleSelected}}</p>
                    </div>
                    <div class="border-bottom border-info form-group">
                        <base-input id="username"
                            v-model="username"
                            required
                            placeholder="Enter your username"
                        ></base-input>
                        <p class="text-warning m-0">Your value is:</p>
                        <p class="text-success m-0">{{username}}</p>
                    </div>
                </form>
            </article>
        </div>
        @endverbatim
    </div>
</div>
@verbatim
<script>
    Vue.component('base-input', {
        inheritAttrs: false,
        props: ['label', 'value'],
        template: `<label>{{ label }}
        <input
          v-bind="$attrs"
          v-bind:value="value"
          v-on:input="$emit('input', $event.target.value)"
        >
      </label>
`
    })

    Vue.component("select-option", {
        props: ["val", "name"],
        template: "<option :value=val checked>{{name}}{{val}}</option>"
    });
    var vm = new Vue({
        el: "#element-form",
        data: {
            username: "",
            number : 0,
            input: "",
            textarea: "",
            checkbox: false,
            checkboxes: ["Me", "He"],
            radio:'Me',
            select: [
                {id: 1, name: "first"},
                {id: 2, name: "second"},
                {id: 3, name: "third"},
            ],
            selected: 2,
            multipleSelected:[],
        },
        computed: {
            multipleSelect: function() {
                return this.select.concat([
                    {id: 4, name: "fourth"},
                    {id: 5, name: "fifth"},
                    {id: 6, name: "sixth"},
                ]);
            },
            num: function() {
                return Object.prototype.toString.call(this.number);
            }
        }
    })
</script>
@endverbatim
@endsection


